<template>
  <view id="box">
    <ToolBarHead v-if="test" style="height: 60px" />
    <view class="center">
      <view style="width: 180px; overflow: hidden">
        <MenuBarLeft :itemList="MenuBarItemList" @choose="choose" :default_index="default_index" />
      </view>
      <view style="flex: 1">
        <MViewCenter :name="name" />
      </view>
    </view>
    <view class="box-item box-end">{{ itemList }}</view>
  </view>
</template>
<script>
import { getCurrentInstance,ref } from "vue";
import ToolBarHead from "@/components/ToolBarHead.vue";
import MenuBarLeft from "@/components/MenuBarLeft.vue";
import MViewCenter from "@/components/MViewCenter.vue";

export default {
  name: "Layout",
  components: {
    ToolBarHead,
    MenuBarLeft,
    MViewCenter,
  },
  data: function () {
    return {
      test: "组件内参数, data 必须是个函数",
    };
  },
  methods:{
    choose(route) {
      this.name = route
    }
  },
  //组件渲染之前调用
  setup() {
    const { proxy: cthis } = getCurrentInstance();
    // cthis.$http.get("testdbs").then((res) => {
    //   console.log(res);
    // });
    return {
      MenuBarItemList: cthis.$mainMenu,
      userInfo:ref(cthis.$userInfo),
      name: ref(cthis.$userInfo.DEFAULTPAGE),
      default_index: cthis.$userInfo.DEFAULTPAGEINDEX
    };
  },
};
</script>


<style>
#box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#box > .center {
  flex: 1;
  display: flex;
  flex-direction: row;
}
</style>
